import React from "react";
import { useNavigate } from "react-router-dom";
import type { MenuProps } from "antd";
import { Menu } from "antd";
import { useDispatch } from "react-redux";
// import MenuItem from "antd/es/menu/MenuItem";

import styles from "./index.module.less";
import { BreadItem } from "../../types/system";
import routes, { SyncRoute } from "../../router/routes";
import { setSettingsAction } from "../../store/actions";

type MenuItem = Required<MenuProps>["items"][number];

interface PropsI {
  children?: React.ReactNode;
}

const MenuBar: React.FC = (props: PropsI) => {
  // // useLocation() may be used only in the context of a <Router> component.
  // const location = useLocation();
  // useNavigate() may be used only in the context of a <Router> component.
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const getBreadcrumbData = (
    routes: Array<SyncRoute>,
    pathname: string,
    breadcrumbs: Array<BreadItem> = []
  ): Array<BreadItem> => {
    // console.log(routes);
    for (const route of routes) {
      // console.log(route);
      // const match = matchPath(pathname, { path: route.path, exact: true });
      // const match = matchPath(route.path, pathname);
      // console.log(matchPath(pathname, route.path));
      // console.log(match);
      const match = pathname.indexOf(route.path) !== -1;
      if (match) {
        // console.log(route);
        if (route.meta && route.meta.title) {
          // breadcrumbs.push({ href: route.path, title: route.meta.title });
          breadcrumbs.push({ key: route.path, label: route.meta.title });
        }
        if (route.children) {
          return getBreadcrumbData(route.children, pathname, breadcrumbs);
        }
      }
    }
    return breadcrumbs;
  };

  // const handleMenuClick = (item: any) => {
  // 	// console.log(item);
  // 	const breadcrumbs = getBreadcrumbData(routes, item.key, []);
  // 	console.log(breadcrumbs);
  // };

  const handleMenuItemSelect = (item: any) => {
    // console.log(item);
    // const breadcrumbs = getBreadcrumbData(routes, item.key, [{ title: "首页", href: "/" }]);
    const breadcrumbs = getBreadcrumbData(routes, item.key, [
      { label: "首页", key: "/" },
    ]);
    // console.log(breadcrumbs);
    navigate(item.key);
    dispatch(setSettingsAction({ breadcrumbs: breadcrumbs }));
  };

  const routeToMenuItem = (routes: SyncRoute[]): MenuItem[] => {
    return routes
      .filter((item: SyncRoute) => {
        return item.meta && item.meta.isMenu;
      })
      .map((item: SyncRoute) => {
        if (item.children && item.children.length) {
          const subChildren: MenuItem[] = routeToMenuItem(item.children);
          return {
            label: item.meta?.title,
            key: item.path,
            icon: item.meta?.icon,
            children: subChildren,
          };
        } else {
          return {
            label: item.meta?.title,
            key: item.path,
            icon: item.meta?.icon,
          };
        }
      }) as MenuItem[];
  };

  const menuItems: MenuItem[] = routeToMenuItem(routes);

  return (
    <Menu
      defaultSelectedKeys={["/predict"]}
      defaultOpenKeys={["/predict"]}
      className={styles.menu}
      mode="inline"
      theme="light"
      // onClick={handleMenuClick}
      onSelect={handleMenuItemSelect}
      items={menuItems}
      data-testid="menu-bar"
    ></Menu>
  );
};

export default MenuBar;
